// 页面背景色
@mixin page-bg-color {
	width: 100%;
	min-height: 100%;
	overflow: hidden;
	background-color: #f5f5f5;
}

// 元素居中的方法
@mixin box-content-center {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
// 元素底部1px
@mixin border-bottom-1px($color) {
	position: relative;
	&::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background-color: $color;
		transform: scaleY(0.5);
		transform-origin: 0 0;
	}
}

// 元素右侧1px
@mixin border-right-1px($color) {
	position: relative;
	&::after {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
		height: 200%;
		background-color: $color;
		transform: scaleY(0.5);
		transform-origin: 0 0;
	}
}

// 元素顶部1px
@mixin border-top-1px($color) {
	position: relative;
	&::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
		background-color: $color;
		transform: scaleY(0.5);
		transform-origin: 0 0;
	}
}

// 元素四周1px
@mixin border-1px($color, $radius) {
	position: relative;
	&::after {
		content: '';
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1px solid $color;
		border-radius: $radius;
		transform: scale(0.5, 0.5);
		transform-origin: top left;
	}
}

// 文字超出2行省略号显示
@mixin text-overflow {
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
}
